import { memo, useState } from 'react'
import styled from 'styled-components'
import AppModal from '../AppModal'
import LoginForm from '../LoginForm'

const LoginContainer = styled.div.attrs((theme) => theme)`
	.login {
		cursor: pointer;
	}
`
export default memo(function HeaderLogin () {
	const [showLoginModal, setShowLoginModal] = useState(false)
	return (
		<LoginContainer>
			<span className="login" onClick={() => setShowLoginModal(!showLoginModal)}>
				LOGIN
			</span>
			<AppModal title={<h3 style={{ fontSize: "16px" }}>登录</h3>} show={showLoginModal} onClose={() => setShowLoginModal(false)}>
				<LoginForm />
			</AppModal>
		</LoginContainer>
	)
})
